import React,{useEffect,useState,useRef} from 'react'
import {useSelector,useDispatch} from "react-redux"
import * as action from "../action"
import { Swiper, Image } from 'react-vant';
import Mypop from '../components/Mypop';
const images = [
    'https://img.yzcdn.cn/vant/apple-1.jpg',
    'https://img.yzcdn.cn/vant/apple-2.jpg',
    'https://img.yzcdn.cn/vant/apple-3.jpg',
    'https://img.yzcdn.cn/vant/apple-4.jpg',
    'https://img.yzcdn.cn/vant/apple-5.jpg',
    'https://img.yzcdn.cn/vant/apple-6.jpg',
    'https://img.yzcdn.cn/vant/apple-7.jpg',
    'https://img.yzcdn.cn/vant/apple-8.jpg',
  ]
function Floor() {
  let [activeIndex,setACtiveindex] = useState(0)
  let [open,setOpen] = useState(false)
  let [infoobj,setInfoobj] = useState({})
  let myref = useRef(null)
  let dispatch = useDispatch()
  let store = useSelector((state)=>{
    return {
        ...state.homereducer
    }
})
let openfn = (data)=> {
    setOpen(true)
    console.log(data);
    setInfoobj(data)
}
let openclose = (data)=>{
        setOpen(data)
}
 let goLou = (index)=>{
   
    setACtiveindex(index)
    // 点击左侧，让右侧跟着滚动，通过下标对应
    myref.current.scrollTop = myref.current.children[index].offsetTop 
    // myref.current.children[index].scrollIntoView({behavior:"smooth"})
 }
  useEffect(()=>{
    dispatch(action.getfloorlist())
    setTimeout(()=>{

        // 监听右侧盒子的滚动事件
        window.addEventListener("scroll",handscroll,true)
    },200)
  },[])
  let handscroll = ()=>{
      
      let tops = myref.current.scrollTop // 获取右侧盒子滚动的距离
    //   console.log(tops);
    let arr = Array.from(myref.current.children) // 右侧盒子的子节点是一个类数组集合，将类数组转化为真正的数组

    arr.forEach((item,index)=>{  // 便利右侧的子节点，如果大盒子滚动的距离超过了子节点距离顶部的距离，说明这个盒子同下标
        // 对应左侧该点击的那个该高亮了
        console.log(tops);
        if (tops >= item.offsetTop) {
            console.log(index);
            setACtiveindex(index)
        }
    })
  }
  return (
     <>
     <Mypop open={open} openclose={openclose} infoobj={infoobj}></Mypop>
     <div className='myswiper'>
            <div className="demo-swiper">
            <Swiper>
                {images.map((image) => (
                <Swiper.Item key={image}>
                    <Image lazyload src={image} />
                </Swiper.Item>
                ))}
            </Swiper>
    </div>
     </div>
     <div className='floorwrap'>
        <div className='left'>
            {
                store.floorarr &&  store.floorarr.length ?  store.floorarr.map((item,index)=>{
                    return <div key={index} onClick={()=>goLou(index)} className={index===activeIndex?"active":""} >{item.tit}</div>
                }):""
            }
        </div>
        <div className='right' ref={myref} style={{position:"relative"}}>
        {
                store.floorarr &&  store.floorarr.length ?  store.floorarr.map((item,index)=>{
                    return <div key={index}>
                          <h3>{item.tit}</h3>
                          <div>
                              {
                                  item.children.map((ite,ind)=>{
                                      return <div key={ind} onClick={()=>openfn(ite)}>
                                          
                                          <dd>
                                              {ite.tit}
                                          </dd>
                                          <dt>
                                              <img src={ite.img} alt="" />                                           
                                          </dt>
                                      </div>
                                  })
                              }
                          </div>
                    </div>
                }):""
            }
        </div>
    </div>
     </>
    
  )
}

export default Floor